<%--
  Created by IntelliJ IDEA.
  User: xianfei
  Date: 15-6-3
  Time: 下午4:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主页</title>
    <script>
        function send() {
            var a = $("#a").val();
            $.ajax({            //异步发送ajax请求
                url: '/index/ajax',
                type: 'POST',
                dataType: 'text',
                data: {name: a},
                success: function (data) {
                    $("#content").css("background-color", "yellow");
                    $("#content").html(data);
                }, error: function () {
                    alert('ajax error');
                }
            });
        }

        $(function () {
            $("#first").click(function () {  //异步刷新局部页面
                $("#content").load("/index/first");
            });

            $("#form").submit(function () {  //用ajax提交表单
                var a = $("#a").val();
                var b = $("#b").val();
                alert("a=" + a + "&b=" + b);
                $.ajax({
                    url: '请求的路径',
                    type: 'post',
                    data: {a: a, b: b},
                    success: function (data) {
                        alert(data);
                    }, error: function () {
                        alert('ajax error');
                    }
                })
                return false;   //阻止表单提交
            });

        });

    </script>
</head>
<body>
<div style="border:1px solid red;">
    <a href="javascript:send(this)">发送ajax请求到后端</a><br/>
    <a href="javascript:void(0)" id="first">第一部分</a><br/>
    <a href="javascript:second(this)">第二部分</a><br/>
    <a href="javascript:third()">第三部分</a><br/>
</div>
<div id="content" style="width:500px;height:300px;">
    <form action="" id="form">
        a:<input type="text" id="a"/><br/>
        b:<input type="text" id="b"/><br/>
        <input type="submit" value="submit"><br/>
    </form>
</div>
</body>
</html>